<template>
  <view class="container">
    <view
      class="indexbg"
      :style="{
        backgroundImage: 'url(' + $util.img('image/index_bg.png') + ')',
      }"
      mode="widthFix"
      lazy-load
    ></view>
    <!-- 导航栏垫子悬空高度 -->
    <view class="fixHeader">
      <view class="header" :style="{ paddingTop: StatusBar + 'px' }">
        <view class="addressinfo" @click="showRegion = true">
          <image
            :src="$util.img('/image/erqi/map.png')"
            mode=""
            class="map"
            lazy-load
          ></image>
          <view class="font-26 ellipsis" style="width: 104rpx">{{
            cityInfo ? cityInfo.name : "请选择城市"
          }}</view>
          <image
            :src="$util.img('/image/erqi/right.png')"
            mode=""
            class="right"
            lazy-load
          ></image>
        </view>
      </view>
    </view>

    <!-- 2025-06-16 新增通顶轮播图 -->
    <view class="">
      <u-swiper
        :list="adlist"
        :indicator="false"
        indicatorMode="dot"
        @click="clickItem"
        circular
        keyName="image"
        radius="0"
        :height="bannerHeight"
        indicatorActiveColor="#00D075"
        indicatorInactiveColor="#fff"
        indicatorStyle="bottom: 40px; "
      ></u-swiper>
    </view>
    <!-- 顶部导航 -->
    <!-- <view class="fixHeader flex-y-center" :style="{paddingTop: StatusBar+'px'}">
       <view class="info">
       	<image :src="$util.img('image/logo.png')" mode=""></image>
		<view class="">
			<view class="font-30 font-weight-8" style="color: #1A7E4F;">润泽无忧家</view>
			<view class="font-20 font-weight-5" style="color: #56AA7D;">国内领先的全维生命质量服务商  </view>
		</view>
       </view>
    </view>
    <view  :style="{height: StatusBar + 45 +'px'}"></view> -->

    <view class="opera rel">
      <view
        class="opera-item"
        v-for="(item, index) in navlist"
        :key="index"
        @click="goChildTo(item)"
      >
        <image
          class="img"
          :src="$util.img(item.image)"
          mode="aspectFill"
          lazy-load
        />
        <text class="text">{{ item.nav_title }}</text>
      </view>
    </view>

    <!-- 模块-呼叫管家 -->
    <view class="module flex rel">
      <view
        class="butler m-r-24"
        :style="{ backgroundImage: 'url(' + $util.img('image/1.png') + ')' }"
        @click="makePhone()"
      >
        <!-- <view class="font-34 c-base text-bold">呼叫管家</view>
			<view class="font-24 c-base">一键呼叫，贴心随侍</view>
			<view class="call">立即呼叫</view> -->
      </view>
      <view class="service">
        <view class="focusitem radius-20 m-b-24">
          <!-- <view class="flex-1">
			    <view class="text-bold font-30">无忧社区</view>
			    <view class="font-24 c-78">乐活康养天地</view>
			  </view>
			  <image :src="$util.img('image/2.png')" mode="" class="img"></image> -->
          <view
            class="items"
            @click="$util.redirectTo('/otherpages/web-view/web-view')"
          >
            <image
              :src="$util.img('image/erqi/home_1.png')"
              mode=""
              class=""
            ></image>
            <view class="font-24 c-base">无忧社区</view>
          </view>
          <view class="items items2" @click="openWuye()">
            <image
              :src="$util.img('image/erqi/home_2.png')"
              mode=""
              class=""
            ></image>
            <view class="font-24 c-base">物业服务</view>
          </view>
        </view>
        <view class="flex">
          <view
            class="wen fill-base radius-20 m-r-24"
            @click="onlineInfo()"
            v-if="isShow"
          >
            <image :src="$util.img('image/3.png')" mode="" class=""></image>
            <view class="font-24">在线问诊</view>
          </view>
          <view
            class="wen fill-base radius-20"
            @click="$util.redirectTo('/otherpages/customized/index')"
          >
            <image :src="$util.img('image/4.png')" mode="" class=""></image>
            <view class="font-24">无忧定制</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 2025-06-16 新增商品叠加轮播效果 -->
    <product-carousel
      :productList="productList"
      field="image"
      @selection="selection"
      v-if="productList.length > 0"
      :isShow="isShow"
    ></product-carousel>

    <!-- <view class="ad m-l-24 m-r-24">
		<u-swiper 
			:list="adlist" 
			indicator 
			indicatorMode="dot" 
			@click="clickItem"
			circular
			keyName="image"
			:height="swiperHeight"
			indicatorActiveColor="#00D075"
			indicatorInactiveColor="#fff"
			></u-swiper>
	</view> -->

    <!-- 2x2图片网格轮播 -->
    <view class="image-grid-container m-l-24 m-r-24 m-t-24">
      <view class="image-grid">
        <view
          class="grid-row"
          v-for="(row, rowIndex) in imageGridData"
          :key="rowIndex"
        >
          <view
            class="grid-item"
            v-for="(item, colIndex) in row"
            :key="colIndex"
          >
            <u-swiper
              :list="item"
              :indicator="item.length > 1"
              indicatorMode="dot"
              indicatorActiveColor="#ff8f33"
              indicatorInactiveColor="#fff"
              :autoplay="true"
              :interval="3000"
              :duration="500"
              height="180rpx"
              keyName="image"
              @click="clickAd($event, item)"
              radius="8"
              bgColor="#ffffff"
            >
              <template v-slot="{ item }">
                <image
                  :src="item"
                  mode="aspectFill"
                  class="grid-image"
                  :style="{ width: '339rpx', height: '180rpx' }"
                />
              </template>
            </u-swiper>
          </view>
        </view>
      </view>
    </view>

    <!-- 推荐活动 -->
    <view class="recommend flex-y-center m-l-24 m-r-24 m-t-24">
      <view class="font-32 text-bold rel m-r-20">
        推荐活动
        <text class="lines"></text>
      </view>
    </view>

    <!-- 增加卡片广告轮播图 -->
    <activity :activityList="activityList"></activity>

    <!-- 登录 -->
    <login-pop ref="loginDialog"></login-pop>

    <tabbar value="0" ref="diyTabbar"></tabbar>

    <!-- 选择设备组件 -->
    <u-picker
      :show="showRegion"
      :columns="regionList"
      keyName="name"
      @confirm="confirmRegion"
      @cancel="cancelRegion"
    ></u-picker>
    <!-- 引入优惠券弹层 -->
    <coupon
      ref="couponDialog"
      :couponInfo="couponInfo"
      :show="showCoupon"
      v-if="showCoupon"
      @close="closeCoupon"
      @receiveCoupon="receiveCoupon"
    ></coupon>
  </view>
</template>

<script>
import coupon from "../../components/coupon/coupon.vue";
import tabbar from "../../components/tabbar/tabbar.vue";
import activity from "../../components/activity/activity.vue";
import ProductCarousel from "../../components/productCarousel/productCarousel.vue";
export default {
  components: {
    activity,
    tabbar,
    "product-carousel": ProductCarousel,
    coupon,
  },
  data() {
    return {
      StatusBar: getApp().globalData.StatusBar,
      navlist: [],
      adlist: [],
      activityList: [],
      imageGridData: [
        [
          [], // 第一行的第一个u-swiper的数据源
          [], // 第一行的第二个u-swiper的数据源
        ],
        [
          [], // 第二行的第一个u-swiper的数据源
          [], // 第二行的第二个u-swiper的数据源
        ],
      ],
      siteInfo: {},
      swiperHeight: 119,
      bannerHeight: 230, // 轮播图高度
      productList: [], // 商品轮播数据
      isShow: 1, // 0 不显示，1显示
      cityInfo: null,
      regionList: [],
      showRegion: false,
      showCoupon: false,
      couponInfo: {},
    };
  },
  onLoad(data) {
    uni.hideTabBar();
    this.getCouponSetting();
    // if (!uni.getStorageSync('token')) this.$refs.loginDialog.open();

    // 接受分享过来的优惠券
    if (data.coupon_id) {
      if (uni.getStorageSync("token")) {
        this.receiveGiftCoupon(data.coupon_id);
      } else {
        uni.setStorageSync("coupon_id", data.coupon_id);
      }
    }

    //分享进来
    if (data.invite_id) uni.setStorageSync("invite_id", data.invite_id);

    // 小程序扫码进入
    if (data.scene) {
      // let scene=source_member-1
      var sceneParams = decodeURIComponent(data.scene);
      sceneParams = sceneParams.split("-");
      if (sceneParams.length) {
        sceneParams.forEach((item) => {
          if (item.indexOf("source_member") != -1) {
            uni.setStorageSync("invite_id", sceneParams[1]);
          }
        });
      }
    }

    // this.getBanner()
    // this.getNavList()
    // this.getSettingInfo()
    // this.getProductList()
    // this.getAdList()

    // 判断设置尺寸，修改轮播图位不同的高度
    this.swiperHeight = (uni.getSystemInfoSync().windowWidth / 375) * 119;
    this.bannerHeight = (uni.getSystemInfoSync().windowWidth / 375) * 230;

    this.getRegionList();

    // 监听全局storage变化
    uni.$on("storageChange", (key) => {
      console.log("监听全局storage变化", uni.getStorageSync("location"));
      if (key === "location") {
        this.getRegionList();
      }
    });
  },
  onUnload() {
    // 移除监听
    uni.$off("storageChange");
  },
  onShow() {
    this.$refs.diyTabbar.init();
    this.getList();
    this.getStatus();
    if (uni.getStorageSync("token")) {
      console.log("登录状态：", uni.getStorageSync("token"));
    }
    // 绑定用户所属区域
    // if (
    //   !uni.getStorageSync("userRegion") &&
    //   uni.getStorageSync("token") &&
    //   uni.getStorageSync("cityInfo")
    // ) {
    //   this.setUserRegion();
    // }
  },
  methods: {
    getCouponSetting() {
      if (!uni.getStorageSync("token")) return;
      this.$api.sendRequest({
        url: "/coupon/api/coupon/setting",
        data: {},
        success: (res) => {
          if (res.code == 0 && res.data) {
            if (res.data.is_use == 1 && res.data.value.is_receive == 0) {
              //开启优惠券   未领取
              this.couponInfo = res.data.value;
              this.showCoupon = true;
            } else {
              this.showCoupon = false;
            }
          } else {
            this.showCoupon = false;
          }
        },
      });
    },
    // 领取转赠的优惠券
    receiveGiftCoupon(coupon_id) {
      if (!uni.getStorageSync("token")) {
        this.$refs.loginDialog.open();
        return;
      }
      this.$api.sendRequest({
        url: "/coupon/api/coupon/regift",
        data: {
          coupon_id: coupon_id,
        },
        success: (res) => {
          if (res.code == 0) {
            this.$util.showToast({ title: "领取成功" });
          } else {
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
    receiveCoupon(coupon_type_id) {
      if (!uni.getStorageSync("token")) {
        this.$refs.loginDialog.open();
        return;
      }
      this.$api.sendRequest({
        url: "/coupon/api/coupon/receive",
        data: {
          coupon_type_id: coupon_type_id,
        },
        success: (res) => {
          if (res.code == 0) {
            this.$util.showToast({ title: "领取成功" });
            this.closeCoupon();
          } else {
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
    closeCoupon() {
      this.showCoupon = false;
    },
    openCoupon() {
      this.showCoupon = true;
    },
    openWuye() {
      uni.navigateToMiniProgram({
        appId: "wxaee3a6352d9f1b99",
        path: "",
        success(res) {
          // 打开成功
        },
      });
    },
    onlineInfo() {
      this.$util.showToast({ title: "此服务系统升级中，敬请期待！" });
    },
    goChildTo(item) {
      this.$util.redirectTo(item.nav_url.wap_url);
    },
    confirmRegion(e) {
      // console.log(e)
      this.cityInfo = e.value[0];
      this.showRegion = false;
      this.setCityInfo();
      // if(uni.getStorageSync('token')&&uni.getStorageSync('cityInfo')) {
      // 	this.setUserRegion()
      // }
    },
    cancelRegion() {
      this.showRegion = false;
    },
    setUserRegion() {
      this.$api.sendRequest({
        url: "/api/member/bindRegion",
        data: {
          region_id: uni.getStorageSync("cityInfo").id,
        },
        success: (res) => {
          if (res.code == 0) {
            console.log("绑定区域成功");
            uni.setStorageSync("userRegion", 1);
          }
        },
      });
    },
    getRegionList() {
      this.$api.sendRequest({
        url: "/api/site/regionlist",
        data: {
          latitude: uni.getStorageSync("location")
            ? uni.getStorageSync("location").latitude
            : "",
          longitude: uni.getStorageSync("location")
            ? uni.getStorageSync("location").longitude
            : "",
        },
        success: (res) => {
          if (res.code == 0 && res.data.length > 0) {
            let arr = res.data;
            // 获取缓存的城市数据，如果有检测数组里面是否存在缓存的城市数据，如果有则直接赋值，没有的话就把第一位赋值给城市信息，并缓存起来
            // let cityInfo = uni.getStorageSync('cityInfo') || null;

            // if(cityInfo && arr.findIndex(item => item.id == cityInfo.id) != -1) {
            // 	this.cityInfo = cityInfo;
            // }else {
            this.cityInfo = arr[0];
            // }
            this.regionList = [arr];
            this.setCityInfo();
          }
        },
      });
    },
    refreshData() {
      this.getBanner();
      this.getNavList();
      this.getSettingInfo();
      this.getProductList();
      this.getAdList();
      this.getList();
    },
    setCityInfo() {
      uni.setStorageSync("cityInfo", this.cityInfo);
      this.refreshData();
    },
    getStatus() {
      this.$api.sendRequest({
        url: "/api/site/isShow",
        data: {},
        success: (res) => {
          if (res.code == 0) {
            this.isShow = res.data; // 0 不显示，1显示
          }
        },
      });
    },
    getAdList() {
      this.$api.sendRequest({
        url: "/api/banner/list2",
        data: {},
        success: (res) => {
          if (res.code == 0) {
            // 未优化前自己写的形式：冗杂，不简洁
            // let one = res.data.one;
            // one.forEach(item => {
            // 	item.image = this.$config.imgDomain + item.image;
            // 	if(item.banner_url) {
            // 		item.banner_url = JSON.parse(item.banner_url);
            // 	}
            // });

            // let two = res.data.two;
            // two.forEach(item => {
            // 	item.image = this.$config.imgDomain + item.image;
            // 	if(item.banner_url) {
            // 		item.banner_url = JSON.parse(item.banner_url);
            // 	}
            // });

            // let three = res.data.three;
            // three.forEach(item => {
            // 	item.image = this.$config.imgDomain + item.image;
            // 	if(item.banner_url) {
            // 		item.banner_url = JSON.parse(item.banner_url);
            // 	}
            // });

            // let four = res.data.four;
            // four.forEach(item => {
            // 	item.image = this.$config.imgDomain + item.image;
            // 	if(item.banner_url) {
            // 		item.banner_url = JSON.parse(item.banner_url);
            // 	}
            // });

            // this.imageGridData.one = one;
            // this.imageGridData.two = two;
            // this.imageGridData.three = three;
            // this.imageGridData.four = four;
            // 根据AI优化以后的形式
            this.imageGridData = [
              [
                res.data.one.map((item) => ({
                  image: this.$config.imgDomain + item.image,
                  banner_url: item.banner_url
                    ? JSON.parse(item.banner_url)
                    : null,
                  content: item.content,
                  banner_title: item.banner_title,
                  skip_type: item.skip_type,
                })),
                res.data.two.map((item) => ({
                  image: this.$config.imgDomain + item.image,
                  banner_url: item.banner_url
                    ? JSON.parse(item.banner_url)
                    : null,
                  content: item.content,
                  banner_title: item.banner_title,
                  skip_type: item.skip_type,
                })),
              ],
              [
                res.data.three.map((item) => ({
                  image: this.$config.imgDomain + item.image,
                  banner_url: item.banner_url
                    ? JSON.parse(item.banner_url)
                    : null,
                  content: item.content,
                  banner_title: item.banner_title,
                  skip_type: item.skip_type,
                })),
                res.data.four.map((item) => ({
                  image: this.$config.imgDomain + item.image,
                  banner_url: item.banner_url
                    ? JSON.parse(item.banner_url)
                    : null,
                  content: item.content,
                  banner_title: item.banner_title,
                  skip_type: item.skip_type,
                })),
              ],
            ];

            console.log(this.imageGridData);
          }
        },
      });
    },
    getBanner() {
      this.$api.sendRequest({
        url: "/api/banner/lists",
        data: {
          type: "0",
        },
        success: (res) => {
          if (res.code == 0) {
            // skip_type: 0, // 0 文章，1 跳转

            var adlist = res.data;

            adlist.forEach((item) => {
              item.image = this.$config.imgDomain + item.image;
              if (item.banner_url) {
                item.banner_url = JSON.parse(item.banner_url);
              }
            });
            // console.log(adlist);
            this.adlist = adlist;
          }
        },
      });
    },
    clickAd(index, adlist) {
      let skip_type = adlist[index].skip_type; // 0 文章，1 跳转
      if (skip_type == 0) {
        if (!adlist[index].content) return;
        uni.setStorageSync("bannerDetail", {
          content: adlist[index].content,
          title: adlist[index].banner_title,
        });
        this.$util.redirectTo("/pages/bannerDetail/bannerDetail");
      } else {
        let link = adlist[index].banner_url;
        // console.log(link)
        if (link == null || link == "" || (!link.wap_url && !link.appid))
          return;
        if (link.appid) {
          uni.navigateToMiniProgram({
            appId: link.appid,
            path: link.page,
          });
        } else {
          this.$util.redirectTo(link.wap_url);
        }
      }
    },
    clickItem(index) {
      let skip_type = this.adlist[index].skip_type; // 0 文章，1 跳转
      if (skip_type == 0) {
        if (!this.adlist[index].content) return;
        uni.setStorageSync("bannerDetail", {
          content: this.adlist[index].content,
          title: this.adlist[index].banner_title,
        });
        this.$util.redirectTo("/pages/bannerDetail/bannerDetail");
      } else {
        let link = this.adlist[index].banner_url;
        // console.log(link)
        if (link == null || link == "" || (!link.wap_url && !link.appid))
          return;
        if (link.appid) {
          uni.navigateToMiniProgram({
            appId: link.appid,
            path: link.page,
          });
        } else {
          this.$util.redirectTo(link.wap_url);
        }
      }
    },
    getNavList() {
      this.$api.sendRequest({
        url: "/api/nav/lists",
        data: {},
        success: (res) => {
          if (res.code == 0) {
            this.navlist = res.data;
            this.navlist.forEach((item) => {
              if (item.nav_url) {
                item.nav_url = JSON.parse(item.nav_url);
              }
            });
          }
        },
      });
    },
    getList() {
      this.$api.sendRequest({
        url: "/api/socialize/goodslist",
        data: {
          page: 1,
          page_size: 20,
          type: "",
          recommend: 1,
        },
        success: (res) => {
          if (res.code == 0) {
            this.activityList = res.data.list;

            // 循环数组，格式化开始时间和结束时间格式为08:00
            for (let i = 0; i < this.activityList.length; i++) {
              this.activityList[i].start_time = this.formatTime(
                this.activityList[i].start_time,
                "HH:mm"
              );
              this.activityList[i].end_time = this.formatTime(
                this.activityList[i].end_time,
                "HH:mm"
              );
            }

            // 如果商品图片存在且为多张的情况下，取第一张图片作为封面图，已逗号拆分字符串，第一张图片做为封面图
            for (let i = 0; i < this.activityList.length; i++) {
              if (this.activityList[i].goods_image) {
                var images = this.activityList[i].goods_image.split(",");
                this.activityList[i].goods_image = images[0];
              }
            }
          }
        },
      });
    },
    formatTime(time) {
      //    time的格式是12:00:00
      return time.substring(0, 5);
    },
    getSettingInfo() {
      this.$api.sendRequest({
        url: "/api/site/info",
        data: {},
        success: (res) => {
          if (res.code == 0) {
            this.siteInfo = res.data;
            uni.setStorageSync("siteInfo", res.data);
          }
        },
      });
    },
    makePhone() {
      uni.makePhoneCall({
        phoneNumber: this.siteInfo.site_tel,
      });
    },
    getProductList() {
      this.$api.sendRequest({
        url: "/api/goodssku/page",
        data: {
          page: 1,
          is_recommend: 1,
        },
        success: (res) => {
          if (res.code == 0) {
            let productList = res.data.list;
            // 如果数组长度大于5，截取前5个，如果小于5，则全部展示
            if (productList.length > 5) {
              this.productList = productList.slice(0, 5);
            } else {
              this.productList = productList;
            }
          }
        },
      });
    },
  },
  onShareAppMessage(res) {
    // 轮播图第一张图作为封面图
    let cover = this.adlist[0].image;
    return {
      title: "润泽无忧家",
      path: "/pages/index/index",
      imageUrl: cover,
    };
  },
  onShareTimeline() {
    // 轮播图第一张图作为封面图
    let cover = this.adlist[0].image;
    return {
      title: "润泽无忧家",
      path: "/pages/index/index",
      imageUrl: cover,
    };
  },
};
</script>

<style lang="scss" scoped>
.indexbg {
  position: absolute;
  top: 0;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 826rpx;
}
.fixHeader {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  .header {
    display: flex;
    padding-left: 24rpx;
    .addressinfo {
      display: flex;
      align-items: center;
      // background-color: #FFFFFF;
      border-radius: 20rpx;
      padding: 8rpx 20rpx;
      width: 162rpx;
      border: 4rpx solid #fff;
      margin-right: 20rpx;
    }
    .map {
      width: 26rpx;
      height: 30rpx;
      margin-right: 12rpx;
    }
    .right {
      width: 7rpx;
      height: 16rpx;
      margin-left: 12rpx;
    }
  }
}
// .fixHeader {
//   position:absolute;
//   top:0;
//   z-index: 9;
//   width: 100%;
//   box-sizing: border-box;
//   padding-left: 30rpx;
//   .info {
// 	  display: flex;
// 	  align-items: center;
// 	  image {
// 		  width: 72rpx;
// 		  height: 72rpx;
// 		  margin-right: 12rpx;
// 	  }
//   }
// }
.opera {
  display: flex;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20rpx;
  margin: -36rpx 24rpx 24rpx;
  padding-bottom: 26rpx;
  .opera-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 26rpx;
    .img {
      width: 109rpx;
      height: 80rpx;
    }
    .text {
      font-size: 26rpx;
      margin-top: 10rpx;
      color: #172140;
    }
  }
}
.module {
  padding: 24rpx;
  border: 1.5rpx solid #ffffff;
  border-radius: 24rpx 24rpx 0 0;
  background: linear-gradient(180deg, #f7f7f780 0%, #f7f7f7 100%);
  .butler {
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 339rpx;
    height: 320rpx;
    border-radius: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;
    .call {
      width: 131rpx;
      height: 52rpx;
      line-height: 52rpx;
      text-align: center;
      color: $color-title2;
      font-size: 24rpx;
      border-radius: 100rpx;
      background: #fff;
      margin-top: 100rpx;
    }
  }
  .focusitem {
    display: flex;
    align-items: center;
    // padding: 34rpx 30rpx 24rpx 30rpx;
    width: 339rpx;
    //   height: 133rpx;
    box-sizing: border-box;
    background-color: $color-title2;
    .items {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 50%;
      padding: 12rpx 0;
      image {
        width: 62rpx;
        height: 62rpx;
      }
    }
    .items2 {
      border-left: 2px solid #fff;
      border-radius: 20rpx 0 0 20rpx;
    }
  }
  .wen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 157rpx;
    height: 163rpx;
    image {
      width: 83rpx;
      height: 83rpx;
      margin-bottom: 10rpx;
    }
  }
}

.recommend {
  .lines {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 112rpx;
    height: 18rpx;
    border-radius: 4rpx;
    opacity: 0.7;
    background: linear-gradient(90deg, #ff8f33 0%, #ffffff00 100%);
  }
}
.image-grid-container {
  .grid-title {
    margin-bottom: 24rpx;
  }

  .image-grid {
    display: flex;
    flex-direction: column;
    gap: 24rpx;

    .grid-row {
      display: flex;
      justify-content: space-between;
      gap: 24rpx;

      .grid-item {
        width: 339rpx;
        height: 180rpx;
        border-radius: 8rpx;
        overflow: hidden;

        .grid-image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

/* 平板适配 */
@media (min-width: 768px) {
  .image-grid-container {
    .image-grid {
      .grid-row {
        .grid-item {
          width: 400rpx;
          height: 212rpx;

          .grid-image {
            width: 400rpx;
            height: 212rpx;
          }
        }
      }
    }
  }
}
</style>
